<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>产后分类</title>
		<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<%-- <link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/base.css"/> --%>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/list.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<style type="text/css">
			body,h1,h2,h3,h4,h5,h6,hr,p,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
		body{
				font:14px / 1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
				-webkit-text-size-adjust:none; -webkit-user-select: none;
				background: #FFFFFF;
			}
			ul,li{margin:0;padding:0}
			ul,li{-webkit-tap-highlight-color:rgba(0,0,0,0)}
			li,ul{list-style-type:none;}
			i{font-style:normal; font-weight:normal}
			input,select,textarea{font-size:12px;}
			input[type="submit"],input[type="reset"],input[type="button"],button{-webkit-appearance: none;}
			input:focus{outline:none}
			.conter{
				margin-top: 40px;
			    margin-bottom: -5px;
			}
			.logo_text {
			    height: 40px;
			    line-height: 40px;
			    display: inline-block;
			    color: #595b60;
			    font-size: 14px;
			    float: left;
			}
			.sort_list{
				width: 95%;
				float: left;
				margin: 15px 0 15px 5%;
			}
			.sort_item{
				width: 24%;
				float: left;
			}
			.icon_pic{
				text-align: center;
				line-height: 0;
			}
			.icon_container{
				display: inline-block;
				width: 60px;
				height: 55px;
				background: url(${BASE_PATH}/static/app/img/fenlei.png) no-repeat;
				background-size: 780%;
			}
			.icon_name{
				text-align: center;
			}
			.leyuan{
				background-position:0 0 ;
			}
			.sheying{
				background-position:-58px 0 ;
			}
			.youer{
				background-position:-116px 0 ;
			}
			.huli{
				background-position:-174px 0 ;
			}
			.wanju{
				background-position:-232px 0 ;
			}
			.yuezi{
				background-position:-291px 0 ;
			}
			.youyong{
				background-position:-349px 0 ;
			}
			.other{
				background-position:-408px 0 ;
			}
			.am-icon-chevron-up:before {
			    margin-top: 8px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<div class="header">
					<span class="back" onclick="javascript:history.go(-1);"></span>
					<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
					<span class="logo_text">OK 妈咪</span>
				</div>
			</header>
			<div class="conter">
				<ul class="sort_list">
					<li class="sort_item" onclick="goodslist(714,720);">
						<div class="icon_pic">
							<div class="icon_container leyuan"></div>
						</div>
						<p class="icon_name">儿童乐园</p>
					</li>
					<li class="sort_item" onclick="goodslist(714,721);">
						<div class="icon_pic">
							<div class="icon_container sheying"></div>
						</div>
						<p class="icon_name">儿童摄影</p>
					</li>
					<li class="sort_item" onclick="goodslist(714,722);">
						<div class="icon_pic">
							<div class="icon_container youer"></div>
						</div>
						<p class="icon_name">幼儿教育</p>
					</li>
					<li class="sort_item" onclick="goodslist(714,723);">
						<div class="icon_pic">
							<div class="icon_container huli"></div>
						</div>
						<p class="icon_name">母婴护理</p>
					</li>
					<li class="sort_item" onclick="goodslist(714,724);">
						<div class="icon_pic">
							<div class="icon_container wanju"></div>
						</div>
						<p class="icon_name">玩具出行</p>
					</li>
					<li class="sort_item" onclick="goodslist(714,725);">
						<div class="icon_pic">
							<div class="icon_container yuezi"></div>
						</div>
						<p class="icon_name">月子会所</p>
					</li>
					<li class="sort_item" onclick="goodslist(714,726);">
						<div class="icon_pic">
							<div class="icon_container youyong"></div>
						</div>
						<p class="icon_name">婴儿游泳</p>
					</li>
					<li class="sort_item" onclick="goodslist(714,728);">
						<div class="icon_pic">
							<div class="icon_container other"></div>
						</div>
						<p class="icon_name">其他分类</p>
					</li>
				</ul>
				<div class="caini">
					<span class="caini_header">猜你喜欢</span>
					<div id="recomGoodsList" class="am-g app-goods-list nin"></div>
				</div>
				<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
					<a href="#top"><span class="am-gotop-title">回到顶部</span><i class="am-gotop-icon am-icon-chevron-up"></i></a>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
		<script src="${BASE_PATH}/static/app/js/swiper-3.4.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/html" id="dataTpl">
		{{each list as item}}
			<div class="am-u-md-4 am-u-lg-3 app-goods-item">
			<ul>
			<li onclick="detail({{item.id}});">
				<img src="${FTP_PATH}{{item.thumb}}" alt="" onerror="src='${BASE_PATH}/static/app/img/model.png';"/>
				<span class="tital">{{item.name}}</span>
				<span class="bot">
					{{if item.type==1}}
					<i class="caini_price">¥{{item.sellPrice}}</i>
					{{else if item.type==2}}
					<i class="caini_price">{{if item.paytype==1}}商品积分{{else if item.paytype==2}}健康积分{{else if item.paytype==3}}教育积分{{/if}} {{item.sellpoint}}</i>
					{{else if item.type==3}}
					<i class="caini_price">{{if item.paytype==1}}商品积分{{else if item.paytype==2}}健康积分{{else if item.paytype==3}}教育积分{{/if}} {{item.sellpoint}} + ¥{{item.sellPrice}}</i>
					{{/if}}
					<span class="men"><i class="men_price"><a class="aline"></a>门市价:¥{{item.marketPrice}}</i><i class="men_jian">已售{{item.num}}件</i></span>
				</span>
			</li>
			</ul>
			</div>
		{{/each}}
	</script>
		<script type="text/javascript">
			var width = $(".caini ul li img").width();
			$(".caini ul li img").height(width);
			$(".caini ul li").height(width);
			var loading = false ,pageNum = 0, totalPage = 1;
				var cityId=${cityId};
			$(function(){
            	Kit.util.onPageEnd(function(){
					if(pageNum < totalPage && !loading && pageNum < 5){
						loading = true;
		            	$("#recomGoodsList").append("<div class=\"app-loading\">正在加载</div>");
		            	Kit.ajax.post("${BASE_PATH}/goods/pageBych",{pageNum:pageNum+1,pageSize:10,cityId:cityId},function(result){
							$("#recomGoodsList").append(template("dataTpl",result.object));
							//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
							$(".app-goods-item","#recomGoodsList").removeClass("am-u-end").last().addClass("am-u-end");
							//图片延迟加载
							$("img.lazyload","#recomGoodsList").not(".lazyload-binded").lazyload({
								failurelimit : 100,
								effect : "show"
							}).addClass("lazyload-binded");
							$(".app-loading","#recomGoodsList").remove();
							pageNum = result.object.pageNumber;
							totalPage = result.object.totalPage;
			            	//重置加载标识
							loading = false;
						});
					}
				});
		})
			function goodslist(categoryonid,categorytwid){
				window.location.href="${BATH_PATH}/goods/pageGoodsList?categoryonid="+categoryonid+"&categorytwid="+categorytwid;
			}
			function detail(id){
				window.location.href="${BASE_PATH}/goods/jfdetail/"+id;
			}
		</script>
	</body>
</html>
